import "./../../assets/css/home.less";
import React, { Component } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Main from "./../main";
import Character from "../character";
import User from "../user";
import Shop from "./../shop";
import Category from './../category'
import Item from "../item/item";
import { Layout, Menu, Button } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons";
import { Avatar } from "antd";
import { SmileTwoTone } from "@ant-design/icons";
import menuData from './../../menuConfig'
import { getStorage } from "../../utils/storageUtils";
import MyBreadCrumb from "../../components/myBreadCrumb";




const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default class index extends Component {
  initMenu(menuData) {

    return menuData.map(m => {
      const userInfo = getStorage('userInfo')
      const flag = userInfo.role.menus.includes(m.key)
      if (flag) {

        if (m.children) {
          return (
            <SubMenu key={m.key} icon={<LaptopOutlined />} title={m.title}>
              {this.initMenu(m.children)}
            </SubMenu>
          )

        } else {
          return (
            <Menu.Item key={m.key}>
              <Link to={m.key}>{m.title}</Link>
            </Menu.Item>
          )
        }
      } else {
        return <></>
      }
    })
  }
  componentWillMount() {
    console.log(this.props);
    switch (this.props.location.pathname) {
      case "/home/main":
        this.defaultKey = "1";
        break;
      case "/home/user":
        this.defaultKey = "2";
        break;
      default:
        break;
    }
    console.log("{this.defaultKey}", this.defaultKey);
  }
  render() {
    return (
      <div>
        <Layout className="out-layout">
          <Header className="header">
            <div className="logo">
              <img src="" alt="" />
            </div>
            <div className="userStatus">
              <Avatar className="ava" size="large" icon={<SmileTwoTone />} />
              <Button
                onClick={() => this.props.history.replace("/login")}
                size="small"
              >
                注销
              </Button>
            </div>
          </Header>
          <Layout>
            <Sider width={200} className="site-layout-background">
              <Menu
                mode="inline"
                defaultSelectedKeys={[this.defaultKey]}
                defaultOpenKeys={["sub1"]}
                style={{ height: "100%", borderRight: 0 }}
              >
                {this.initMenu(menuData)}
              </Menu>
            </Sider>
            <Layout style={{ padding: "0 24px 24px" }}>
              <MyBreadCrumb></MyBreadCrumb>
              <Content
                className="site-layout-background"
                style={{
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >
                <Switch>
                  <Redirect exact from="/home" to="/home/main"></Redirect>
                  <Route path="/home/main" component={Main}></Route>
                  <Route path="/home/user" component={User}></Route>
                  <Route path="/home/character" component={Character}></Route>
                  <Route path="/home/shop" component={Shop}></Route>
                  <Route path="/home/product/category" component={Category}></Route>
                  <Route path="/home/product/item" component={Item}></Route>
                </Switch>
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    );
  }
}
